<template>
  <div class="home-container">
    <!-- 背景动画元素 -->
    <div class="bg-animation-area">
      <div v-for="n in 6" :key="n" :class="`circle-container circle-${n}`">
        <div class="circle"></div>
      </div>
    </div>
    
  <div class="home">
    <div class="banner">
      <h1>欢迎来到不然影院</h1>
      <p>探索光影世界，发现精彩瞬间</p>
    </div>

    <div class="search-bar">
      <div class="search-inputs">
        <el-input
          v-model="searchTitle"
          placeholder="输入电影名称"
          class="search-input"
          @keyup.enter="fetchMovies"
        >
        </el-input>
        <el-input
          v-model="searchDirector"
          placeholder="输入导演名称"
          class="search-input"
          @keyup.enter="fetchMovies"
        >
        </el-input>
        <div class="search-buttons">
          <el-button @click="fetchMovies" type="primary" class="action-button">
            搜索
          </el-button>
          <el-button @click="resetSearch" type="info" class="action-button">
            重置
          </el-button>
        </div>
      </div>
    </div>

    <div class="movie-list" v-loading="loading">
      <el-empty v-if="movies.length === 0 && !loading" description="暂无电影信息">
        <el-button type="primary" @click="fetchMovies(true)">刷新</el-button>
      </el-empty>

      <div v-else class="movies-container">
        <el-card
          v-for="movie in movies"
          :key="movie.id"
          class="movie-card"
          shadow="hover"
        >
          <router-link :to="{ name: 'MovieDetail', params: { id: movie.id } }" class="movie-link">
            <div class="movie-info">
              <h3 class="movie-title">{{ movie.title }}</h3>
              <p class="movie-director">导演: {{ movie.director || '未知' }}</p>
              <p class="movie-genre" v-if="movie.genre">类型: {{ movie.genre }}</p>
            </div>
          </router-link>
        </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElIcon } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'
import axiosInstance from '../utils/axiosInstance'

interface Movie {
  id: number;
  title: string;
  director?: string;
  actors?: string;
  genre?: string;
  releaseDate?: string;
  duration?: number;
  description?: string;
  posterUrl?: string;
  status?: string;
}

const searchTitle = ref('')
const searchDirector = ref('')

const movies = ref<Movie[]>([])
const loading = ref(false)
const error = ref<string | null>(null)

const fetchMovies = async (forceRefresh = false) => {
  if (!forceRefresh && loading.value) return
  
  loading.value = true
  error.value = null
  try {
    const params: Record<string, any> = {}
    if (searchTitle.value) params.title = searchTitle.value
    if (searchDirector.value) params.director = searchDirector.value
    
    // 强制添加 status 参数，确保只查询"正在热映"的电影
    params.status = '正在热映' 

    const response = await axiosInstance.get<Movie[]>('/movies', { params })
    
    movies.value = response.data
  } catch (err: any) {
    console.error("Failed to fetch movies:", err)
    error.value = "加载电影列表失败"
  } finally {
    loading.value = false
  }
}

const resetSearch = () => {
  searchTitle.value = ''
  searchDirector.value = ''
  fetchMovies()
}

onMounted(() => {
  fetchMovies()
})
</script>

<style scoped>
/* 全局和背景样式 */
.home-container {
  /* background-color: #f5f7fa; */ /* Remove old background color */
  background: url('/home-background.jpg') no-repeat center center; /* Set new background image */
  background-size: cover; /* Make image cover the container */
  padding: 20px;
  min-height: calc(100vh - 60px);
}

.bg-animation-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 动画圆形装饰元素 */
.circle-container {
  position: absolute;
  width: 300px;
  height: 300px;
  opacity: 0.4;
  z-index: 0;
  animation: floatCircle 18s infinite ease-in-out;
}

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 174, 237, 0.6) 0%, rgba(88, 144, 255, 0) 70%);
}

.circle-1 {
  top: -100px;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  top: 20%;
  right: -150px;
  width: 400px;
  height: 400px;
  animation-delay: -3s;
}

.circle-3 {
  bottom: -150px;
  left: 30%;
  width: 350px;
  height: 350px;
  animation-delay: -5s;
}

.circle-4 {
  top: 45%;
  left: -100px;
  width: 200px;
  height: 200px;
  animation-delay: -7s;
}

.circle-5 {
  bottom: 20%;
  right: 5%;
  width: 250px;
  height: 250px;
  animation-delay: -10s;
}

.circle-6 {
  top: 10%;
  left: 45%;
  width: 180px;
  height: 180px;
  animation-delay: -15s;
}

@keyframes floatCircle {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
  }
  25% {
    transform: translateY(-20px) translateX(10px) scale(1.05);
  }
  50% {
    transform: translateY(0) translateX(20px) scale(1);
  }
  75% {
    transform: translateY(20px) translateX(-10px) scale(0.95);
  }
}

/* 页面主内容样式 */
.home {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.banner {
  /* background: linear-gradient(to right, #3360ff, #5c8bff); */
  background: rgba(51, 96, 255, 0.8); /* Semi-transparent blue */
  color: white;
  padding: 50px 20px;
  text-align: center;
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 10px 25px rgba(51, 96, 255, 0.25);
  position: relative;
  overflow: hidden;
}

.banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 80%);
  animation: rotateBg 15s linear infinite;
}

@keyframes rotateBg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.banner h1 {
  margin-bottom: 15px;
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.banner p {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto;
}

.search-bar {
  margin-bottom: 30px;
  padding: 25px;
  /* background-color: #fff; */
  background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.search-inputs {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 180px;
}

.search-buttons {
  display: flex;
  gap: 12px;
}

.movie-list {
  min-height: 400px;
}

.movies-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 25px;
}

.movie-card {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: none;
  overflow: hidden;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white for cards */
}

.movie-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.movie-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.movie-info {
  padding: 15px;
}

.movie-title {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-director, .movie-genre {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .banner h1 {
    font-size: 2rem;
  }
  
  .movies-container {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}
</style>
